import React, { Component } from 'react';
/* 
    1，属性代理
     抽离 state

*/

class InputName extends Component{
  render(){
    return <input value={this.props.value} onChange={this.props.onChange}></input>
  }
}
/* 定义高阶组件 */
function withOnchange(WrappedComponent){
  
  return class extends Component{
    state ={
      value:"😊"
    }
    handleChange = (e) => {
      this.setState({
        value:e.target.value
      })
    }
    render(){
      return <WrappedComponent value={this.state.value} onChange={this.handleChange}></WrappedComponent>
    }
  }
}

let WrappendInputName = withOnchange(InputName)

class App extends Component {

  render() {
    return (
      <div>
        <WrappendInputName></WrappendInputName>
      </div>
    );
  }
}

export default App;
